<style type="text/less" lang="less" scoped>
  @import url("./index.less");
</style>

<template>
  <el-container class="image-detail" ref="image-detail">
    <el-row :gutter="20">
      <el-col :span="12" class="content-main">
        <p class="title" v-html="webData.title"></p>

        <div class="auther" v-html="webData.auther"></div>

        <iframe class="content-iframe" ref="content-iframe" hidefocus="true" frameborder="0" scrolling="no"
          style="width: 100%"></iframe>

        <div class="analyze">
          <router-link v-if="$route.query.type !== 'unstructure'" :to="
              '/connect/images?type=' +
              $route.query.type +
              '&id=' +
              $route.query.id
            "><i class="iconfont icon-analyze"></i>返回</router-link>
          <div v-else @click="$router.go(-1)" style="cursor:pointer;padding:10px;"><i
              class="iconfont icon-analyze"></i>返回</div>
          <a href="javascript:;" @click="importAnalyze"><i class="el-icon-upload"></i>导入</a>
        </div>

        <el-container class="tool">
          <el-aside width="80px" class="buttons">
            <el-radio-group v-model="editType" size="medium">
              <el-radio-button label="nodes" title="节点"><i class="el-icon-location"></i></el-radio-button>
              <el-radio-button label="relations" title="关系"><i class="el-icon-sort"></i></el-radio-button>
            </el-radio-group>
          </el-aside>
          <el-main class="bodys">
            <div class="nodes" v-show="editType == 'nodes'">
              <!--<a href="javascript:;" class="node-type bg-county" title="国家" @click="selNode('国家', 3)"></a>-->
              <a href="javascript:;" class="node-type bg-type" title="类型" @click="selNode('type', 1)"></a>
              <a href="javascript:;" class="node-type bg-entity" title="实体" @click="selNode('entity', 2)"></a>
              <a href="javascript:;" class="node-type bg-othersc" title="地区" @click="selNode('othersc', 4)"></a>
              <div style="float: right; padding-right: 10px"
                v-show="showTypeLabels || showEntityLabels || showOtherscLabels">
                <el-button type="text" size="medium" @click="
                    showTypeLabels = false;
                    showEntityLabels = false;
                    showOtherscLabels = false;
                  ">取消</el-button>
                <el-button type="text" size="medium" @click="saveNode">保存</el-button>
              </div>
              <div style="float: right; padding-right: 10px" v-show="
                  !showTypeLabels && !showEntityLabels && !showOtherscLabels
                ">
                <div style="text-align: right">
                  <el-button type="text" size="medium" @click="aliasFormOpen">添加别名</el-button>
                </div>
              </div>

              <div class="labels relation-edit" v-show="aliasForm.visible" style="right: 0; padding: 5px 10px 0 0">
                <el-form ref="aliasForm" :model="aliasForm" size="mini">
                  <el-form-item style="
                      margin-bottom: 0px;
                      text-align: center;
                      font-weight: bold;
                    ">
                    添加别名
                  </el-form-item>
                  <el-form-item label="别名：" label-width="70px">
                    <el-input v-model="aliasForm.alias" placeholder="请输入别名"></el-input>
                  </el-form-item>
                  <el-form-item label="搜索：" label-width="70px">
                    <el-input v-model="aliasForm.keyword" placeholder="请输入关键词" @change="aliasChange"></el-input>
                  </el-form-item>
                  <el-form-item label="关联：" label-width="70px">
                    <el-cascader v-model="aliasForm.correlation" :options="aliasForm.labels" :show-all-levels="false"
                      ref="correlation"></el-cascader>
                  </el-form-item>
                  <el-form-item label-width="70px">
                    <el-button @click="aliasForm.visible = false">取 消</el-button>
                    <el-button type="primary" @click="aliasSave">确 定</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="labels relation-edit" v-show="showTypeLabels">
                <el-form ref="addTypeForm" size="small" :model="addNodeForm" :rules="addNodeForm.rules">
                  <table style="width: 100%">
                    <thead>
                      <tr>
                        <th>添加为类型</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-if="addNodeForm.selStr">
                        <td style="
                            color: #999;
                            font-size: 10px;
                            text-align: center;
                          ">
                          ({{ addNodeForm.selStr }})
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <el-form-item prop="node" style="margin-bottom: 0">
                            <el-select v-model="addNodeForm.node" value-key="name" placeholder="选择类型">
                              <el-option-group>
                                <el-option :label="'新类型'" :value="{ name: '', label: '', county: '' }"></el-option>
                              </el-option-group>
                              <el-option-group label="相似类型：">
                                <el-option v-for="item in labelsData" :key="item.id" :label="item.name" :value="item">
                                  <span style="float: left">{{
                                    item.name
                                  }}</span>
                                  <span style="
                                      float: right;
                                      color: #8492a6;
                                      font-size: 13px;
                                    ">&lt;{{ item.label }}&gt;</span>
                                </el-option>
                              </el-option-group>
                            </el-select>
                          </el-form-item>
                        </td>
                      </tr>
                      <tr>
                        <!-- <tr v-show="addNodeForm.node.label == ''"> -->
                        <td>
                          <el-form-item prop="label" :rules="{
                              required:
                                addNodeForm.node.label == '' ? true : false,
                              message: '不能为空',
                            }">
                            <!-- <el-cascader v-model="addNodeForm.label" change-on-select :options="typeLabels" :props="{
                                label: 'label_name',
                                value: 'label_name',
                              }" placeholder="选择标签"></el-cascader> -->
                            <el-treeselect v-model="addNodeForm.node.label" placeholder="请输入搜索内容" :data="typeLabels"
                              :props="{
                      label: 'label_name',
                      value: 'id',
                      children: 'children',
                    }" :clickParent="true" :search="false">
                            </el-treeselect>
                          </el-form-item>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </el-form>
              </div>
              <div class="labels relation-edit" v-show="isShowChangeEdge">
                <table style="width: 200px;height:200px;overflow:auto;">
                  <thead>
                    <tr>
                      <th>修改关系名称</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <el-tree :data="relationlist" node-key="id" default-expand-all :expand-on-click-node="false"
                        :props="{ label: 'label_name' }" @node-click="changeRelationName">
                      </el-tree>
                      <!-- <el-select v-model="relationName" placeholder="请选择关系" @change=changeRelationName>
                        <el-option v-for="item in relationlist" :key="item.value" :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select> -->
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="labels relation-edit" v-show="showEntityLabels">
                <el-form ref="addEntityForm" size="small" :model="addNodeForm" :rules="addNodeForm.rules">
                  <table style="width: 100%">
                    <thead>
                      <tr>
                        <th>添加为实体</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-if="addNodeForm.selStr">
                        <td style="
                            color: #999;
                            font-size: 10px;
                            text-align: center;
                          ">
                          ({{ addNodeForm.selStr }})
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <el-form-item prop="node" style="margin-bottom: 0">
                            <el-select v-model="addNodeForm.node" value-key="name" placeholder="选择实体">
                              <el-option-group>
                                <el-option :label="'新实体'" :value="{ name: '', label: '', county: '' }"></el-option>
                              </el-option-group>
                              <el-option-group label="相似实体：">
                                <el-option v-for="item in labelsData" :key="item.id" :label="item.name" :value="item">
                                  <span style="float: left">{{
                                    item.name
                                  }}</span>
                                  <span style="
                                      float: right;
                                      color: #8492a6;
                                      font-size: 13px;
                                    ">&lt;{{ item.label }}&gt;</span>
                                </el-option>
                              </el-option-group>
                            </el-select>
                          </el-form-item>
                        </td>
                      </tr>
                      <tr v-show="addNodeForm.node.county == ''">
                        <td>
                          <el-form-item prop="label" :rules="{
                              required:
                                addNodeForm.node.county == '' ? true : false,
                              message: '不能为空',
                            }" style="margin-bottom: 0">
                            <!-- <el-cascader v-model="addNodeForm.label" change-on-select :options="entityLabels" :props="{
                                label: 'label_name',
                                value: 'label_name',
                              }" placeholder="选择标签"></el-cascader> -->
                            <el-treeselect v-model="addNodeForm.node.label" placeholder="请输入搜索内容" :data="typeLabels"
                              :props="{
                      label: 'label_name',
                      value: 'id',
                      children: 'children',
                    }" :clickParent="true" :search="false">
                            </el-treeselect>
                          </el-form-item>
                        </td>
                      </tr>
                      <tr v-show="addNodeForm.node.county == ''">
                        <td>
                          <el-form-item prop="county" :rules="{
                              required:
                                addNodeForm.node.county == '' ? true : false,
                              message: '不能为空',
                            }">
                            <el-select v-model="addNodeForm.county" placeholder="选择国家">
                              <el-option v-for="item in countys" :key="item.id" :label="item.name" :value="item.name">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </el-form>
              </div>
              <div class="labels relation-edit" v-show="showOtherscLabels">
                <el-form ref="addOtherscForm" size="small" :model="addNodeForm" :rules="addNodeForm.rules">
                  <table style="width: 100%">
                    <thead>
                      <tr>
                        <th>添加为地区</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-if="addNodeForm.selStr">
                        <td style="
                            color: #999;
                            font-size: 10px;
                            text-align: center;
                          ">
                          ({{ addNodeForm.selStr }})
                        </td>
                      </tr>
                      <tr>
                        <td>
                          <el-form-item prop="node" style="margin-bottom: 0">
                            <el-select v-model="addNodeForm.node" value-key="name" placeholder="选择类型">
                              <el-option-group>
                                <el-option :label="'新地区'" :value="{ name: '', label: '', county: '' }"></el-option>
                              </el-option-group>
                              <el-option-group label="相似地区：">
                                <el-option v-for="item in labelsData" :key="item.id" :label="item.name" :value="item">
                                  <span style="float: left">{{
                                    item.name
                                  }}</span>
                                  <span style="
                                      float: right;
                                      color: #8492a6;
                                      font-size: 13px;
                                    ">&lt;{{ item.label }}&gt;</span>
                                </el-option>
                              </el-option-group>
                            </el-select>
                          </el-form-item>
                        </td>
                      </tr>
                      <tr v-show="addNodeForm.node.label == ''">
                        <td>
                          <el-form-item prop="label" style="margin-bottom: 0" :rules="{
                              required:
                                addNodeForm.node.label == '' ? true : false,
                              message: '不能为空',
                            }">
                            <!-- <el-cascader v-model="addNodeForm.label" change-on-select :options="otherscLabels" :props="{
                                label: 'label_name',
                                value: 'label_name',
                              }" placeholder="选择标签"></el-cascader> -->
                            <el-treeselect v-model="addNodeForm.node.label" placeholder="请输入搜索内容" :data="typeLabels"
                              :props="{
                      label: 'label_name',
                      value: 'id',
                      children: 'children',
                    }" :clickParent="true" :search="false">
                            </el-treeselect>
                          </el-form-item>
                        </td>
                      </tr>
                      <tr v-show="addNodeForm.node.label == ''">
                        <td>
                          <el-form-item prop="county" style="margin-bottom: 0">
                            <el-select v-model="addNodeForm.county" clearable placeholder="选择国家">
                              <el-option v-for="item in countys" :key="item.id" :label="item.name" :value="item.name">
                              </el-option>
                            </el-select>
                          </el-form-item>
                        </td>
                      </tr>
                      <tr v-show="addNodeForm.node.label == ''">
                        <td>
                          <el-form-item prop="lat.value" style="margin-bottom: 0" :rules="[
                              {
                                required:
                                  addNodeForm.node.label == '' ? true : false,
                                message: '不能为空',
                              },
                              { type: 'number', message: '必须为数字' },
                            ]">
                            <el-input placeholder="请输入纬度" v-model.number="addNodeForm.lat.value" style="width: 215px">
                              <el-select v-model="addNodeForm.lat.type" slot="append" placeholder="请选择"
                                style="width: 60px">
                                <el-option label="N" value="N"></el-option>
                                <el-option label="S" value="S"></el-option>
                              </el-select>
                            </el-input>
                          </el-form-item>
                        </td>
                      </tr>
                      <tr v-show="addNodeForm.node.label == ''">
                        <td>
                          <el-form-item prop="lng.value" :rules="[
                              {
                                required:
                                  addNodeForm.node.label == '' ? true : false,
                                message: '不能为空',
                              },
                              { type: 'number', message: '必须为数字' },
                            ]">
                            <el-input placeholder="请输入经度" v-model.number="addNodeForm.lng.value" style="width: 215px">
                              <el-select v-model="addNodeForm.lng.type" slot="append" placeholder="请选择"
                                style="width: 60px">
                                <el-option label="E" value="E"></el-option>
                                <el-option label="W" value="W"></el-option>
                              </el-select>
                            </el-input>
                          </el-form-item>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </el-form>
              </div>
            </div>
            <div class="relations" v-show="editType == 'relations'">
              <el-radio-group v-model="relationForm.relationType" size="medium" @change="selRelationChange">
                <el-radio-button label="移动"></el-radio-button>
                <el-radio-button label="配置"></el-radio-button>
                <el-radio-button label="编成"></el-radio-button>
                <el-radio-button label="活动"></el-radio-button>
              </el-radio-group>
              <div style="float: right; padding-right: 10px" v-show="relationForm.relationType">
                <el-button type="text" size="medium" @click="relationForm.relationType = ''">取消</el-button>
                <el-button type="text" size="medium" @click="saveRelation">保存</el-button>
              </div>
              <div class="relation-edit" v-show="relationForm.relationType == '移动'">
                <el-form ref="移动" size="small" :show-message="false" :model="relationForm" :rules="relationForm.rules">
                  <table class="relation-table">
                    <thead>
                      <tr>
                        <th>对象</th>
                        <th>地区</th>
                        <th>时间</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td style="vertical-align: top">
                          <el-form-item prop="relationObject1" class="obj-form-item">
                            <div style="height: 150px; overflow: auto">
                              <el-radio-group v-model="relationForm.relationObject1" size="medium" class="obj-group">
                                <template v-for="(item, key) of nodeObj">
                                  <el-radio-button v-if="item.type == 2" :label="item.name" :key="key">{{ item.name }}
                                  </el-radio-button>
                                </template>
                              </el-radio-group>
                            </div>
                          </el-form-item>
                        </td>
                        <td style="vertical-align: top">
                          <el-form-item prop="relationObject2" class="obj-form-item">
                            <div style="height: 150px; overflow: auto">
                              <el-radio-group v-model="relationForm.relationObject2" size="medium" class="obj-group">
                                <template v-for="(item, key) of nodeObj">
                                  <el-radio-button v-if="item.type == 4" :label="item.name" :key="key">{{ item.name }}
                                  </el-radio-button>
                                </template>
                              </el-radio-group>
                            </div>
                          </el-form-item>
                        </td>
                        <td style="padding: 0 5px">
                          <el-form-item prop="relationTime">
                            <el-autocomplete v-model="relationForm.relationTime" :fetch-suggestions="timeSearch"
                              placeholder="请输入日期"></el-autocomplete>
                          </el-form-item>
                        </td>
                      </tr>
                    </tbody>
                    <tfoot>
                      <td colspan="3" style="padding: 5px">
                        <div style="width: 450px">
                          派往、集结、云集、部署、抵达、开进、进入、驶入、赶赴、开赴、驶离、离开、驶往、前往、调入、游弋、抵近、撤离、通过、经过、停泊、停靠、驻扎、返回、回返、运抵
                        </div>
                      </td>
                    </tfoot>
                  </table>
                </el-form>
              </div>
              <div class="relation-edit" v-show="relationForm.relationType == '配置'">
                <el-form ref="配置" size="small" :show-message="false" :model="relationForm" :rules="relationForm.rules">
                  <table class="relation-table">
                    <thead>
                      <tr>
                        <th>主体</th>
                        <th>搭载</th>
                        <th>时间</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td style="vertical-align: top">
                          <el-form-item prop="relationObject1" class="obj-form-item">
                            <div style="height: 150px; overflow: auto">
                              <el-radio-group v-model="relationForm.relationObject1" size="medium" class="obj-group">
                                <template v-for="(item, key) of nodeObj">
                                  <el-radio-button v-if="item.type == 2" :label="item.name" :key="key">{{ item.name }}
                                  </el-radio-button>
                                  <!--<el-radio-button v-if="entityNames.indexOf(item.type)!=-1" :label="item.name" :key="key">{{item.name}}</el-radio-button>-->
                                </template>
                              </el-radio-group>
                            </div>
                          </el-form-item>
                        </td>
                        <td style="vertical-align: top">
                          <el-form-item prop="relationObject2" class="obj-form-item">
                            <div style="height: 150px; overflow: auto">
                              <el-radio-group v-model="relationForm.relationObject2" size="medium" class="obj-group">
                                <template v-for="(item, key) of nodeObj">
                                  <el-radio-button v-if="item.type == 1" :label="item.name" :key="key">{{ item.name }}
                                  </el-radio-button>
                                  <!--<el-radio-button v-if="typeNames.indexOf(item.type)!=-1" :label="item.name" :key="key">{{item.name}}</el-radio-button>-->
                                </template>
                              </el-radio-group>
                            </div>
                          </el-form-item>
                        </td>
                        <td style="padding: 0 5px">
                          <el-form-item prop="relationTime">
                            <el-autocomplete v-model="relationForm.relationTime" :fetch-suggestions="timeSearch"
                              placeholder="请输入日期"></el-autocomplete>
                          </el-form-item>
                        </td>
                      </tr>
                    </tbody>
                    <tfoot>
                      <td colspan="3" style="padding: 5px">
                        满载、搭载、指挥官、配备、载有、携带
                      </td>
                    </tfoot>
                  </table>
                </el-form>
              </div>
              <div class="relation-edit" v-show="relationForm.relationType == '编成'">
                <el-form ref="编成" size="small" :show-message="false" :model="relationForm" :rules="relationForm.rules">
                  <table class="relation-table">
                    <thead>
                      <tr>
                        <th>个体</th>
                        <th>组织</th>
                        <th>时间</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td style="vertical-align: top">
                          <el-form-item prop="relationObject1" class="obj-form-item">
                            <div style="height: 150px; overflow: auto">
                              <el-radio-group v-model="relationForm.relationObject1" size="medium" class="obj-group">
                                <template v-for="(item, key) of nodeObj">
                                  <el-radio-button v-if="item.type == 2" :label="item.name" :key="key">{{ item.name }}
                                  </el-radio-button>
                                  <!--<el-radio-button v-if="entityNames.indexOf(item.type)!=-1" :label="item.name" :key="key">{{item.name}}</el-radio-button>-->
                                </template>
                              </el-radio-group>
                            </div>
                          </el-form-item>
                        </td>
                        <td style="vertical-align: top">
                          <el-form-item prop="relationObject2" class="obj-form-item">
                            <div style="height: 150px; overflow: auto">
                              <el-radio-group v-model="relationForm.relationObject2" size="medium" class="obj-group">
                                <template v-for="(item, key) of nodeObj">
                                  <el-radio-button v-if="item.type == 2" :label="item.name" :key="key">{{ item.name }}
                                  </el-radio-button>
                                  <!--<el-radio-button v-if="entityNames.indexOf(item.type)!=-1" :label="item.name" :key="key">{{item.name}}</el-radio-button>-->
                                </template>
                              </el-radio-group>
                            </div>
                          </el-form-item>
                        </td>
                        <td style="padding: 0 5px">
                          <el-form-item prop="relationTime">
                            <el-autocomplete v-model="relationForm.relationTime" :fetch-suggestions="timeSearch"
                              placeholder="请输入日期"></el-autocomplete>
                          </el-form-item>
                        </td>
                      </tr>
                    </tbody>
                    <tfoot>
                      <td colspan="3" style="padding: 5px">编入、增调</td>
                    </tfoot>
                  </table>
                </el-form>
              </div>
              <div class="relation-edit" v-show="relationForm.relationType == '活动'">
                <el-form ref="活动" size="small" :show-message="false" :model="relationForm" :rules="relationForm.rules">
                  <table class="relation-table">
                    <thead>
                      <tr>
                        <th>对象</th>
                        <th>状态</th>
                        <th>地区</th>
                        <th>时间</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td style="vertical-align: top">
                          <el-form-item prop="relationObject1" class="obj-form-item">
                            <div style="height: 150px; overflow: auto">
                              <el-radio-group v-model="relationForm.relationObject1" size="medium" class="obj-group">
                                <template v-for="(item, key) of nodeObj">
                                  <el-radio-button v-if="item.type == 2" :label="item.name" :key="key">{{ item.name }}
                                  </el-radio-button>
                                  <!--<el-radio-button v-if="entityNames.indexOf(item.type)!=-1" :label="item.name" :key="key">{{item.name}}</el-radio-button>-->
                                </template>
                              </el-radio-group>
                            </div>
                          </el-form-item>
                        </td>
                        <td style="vertical-align: top">
                          <el-form-item prop="relationObject2" class="obj-form-item">
                            <div style="height: 150px; overflow: auto">
                              <el-radio-group v-model="relationForm.relationObject2" size="medium" class="obj-group">
                                <el-radio-button label="事故">事故</el-radio-button>
                                <el-radio-button label="维修">维修</el-radio-button>
                                <el-radio-button label="任务">任务</el-radio-button>
                              </el-radio-group>
                            </div>
                          </el-form-item>
                        </td>
                        <td style="vertical-align: top">
                          <el-form-item prop="relationObject3" class="obj-form-item">
                            <div style="height: 150px; overflow: auto">
                              <el-radio-group v-model="relationForm.relationObject3" size="medium" class="obj-group">
                                <template v-for="(item, key) of nodeObj">
                                  <el-radio-button v-if="item.type == 4" :label="item.name" :key="key">{{ item.name }}
                                  </el-radio-button>
                                </template>
                              </el-radio-group>
                            </div>
                          </el-form-item>
                        </td>
                        <td style="padding: 0 5px">
                          <el-form-item prop="relationTime">
                            <el-autocomplete v-model="relationForm.relationTime" :fetch-suggestions="timeSearch"
                              placeholder="请输入日期"></el-autocomplete>
                          </el-form-item>
                        </td>
                      </tr>
                    </tbody>
                    <tfoot>
                      <td colspan="4" style="padding: 5px">
                        进入、处于、进行、完成、结束
                      </td>
                    </tfoot>
                  </table>
                </el-form>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-col>

      <el-col :span="11" class="content-main-ht">
        <div class="ht-main" style="position: relative" ref="details_info"></div>
        <div class="nav-header">
          <p class="nav-text">
            <span>参数</span>
            <i class="iconfont icon-edit"></i>
          </p>
        </div>
        <div class="nav-form">
          <el-form ref="form" :model="form" label-width="100px" :rules="form.rules"
            v-show="selRelation && form.visible">
            <el-form-item label="名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="startTime">
              <el-autocomplete v-model="form.startTime" :fetch-suggestions="timeSearch" placeholder="请输入日期">
              </el-autocomplete>
            </el-form-item>
            <el-form-item label="结束时间" prop="endTime">
              <el-autocomplete v-model="form.endTime" :fetch-suggestions="timeSearch" placeholder="请输入日期">
              </el-autocomplete>
            </el-form-item>
            <el-form-item label="性质">
              <el-input v-model="form.nature"></el-input>
            </el-form-item>
            <el-form-item label="程度">
              <el-input v-model="form.level"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="background-color: #3579f8" @click="editRelation">修改</el-button>
            </el-form-item>
          </el-form>
          <el-form ref="form" :model="edgeform" label-width="100px" :rules="form.rules"
            v-show="selRelation && edgeform.visible">
            <el-form-item label="时间" prop="time">
              <el-autocomplete v-model="edgeform.time" :fetch-suggestions="timeSearch" placeholder="请输入日期">
              </el-autocomplete>
              <!--<el-select v-model="edgeform.time" filterable allow-create default-first-option placeholder="选择日期时间">-->
              <!--<el-option v-for="item in times" :key="item.value" :label="item.value" :value="item.value"></el-option>-->
              <!--</el-select>-->
            </el-form-item>
            <el-form-item>
              <el-button type="primary" style="background-color: #3579f8" @click="editRelation">修改</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </el-container>
</template>

<script>
  import $ from "jquery";
  import {
    showLoading,
    hideLoading
  } from '../../../insert/loading';
  import elTreeselect from "el-tree-select";
  // import { Message } from "element-ui";

  export default {
    name: "imageDetail",
    components: {
      elTreeselect
    },
    data() {
      const validateDate = (rule, value, callback) => {
        const sDate = value ? value.replace(/(^\s+|\s+$)/g, "") : "";
        if (sDate === "") {
          callback();
          return false;
        }

        if (sDate.indexOf(" ") > 0) {
          const result = sDate.match(
            /^(\d{4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/
          );
          if (result == null) {
            callback(new Error("格式不正确"));
            return false;
          }
          const d = new Date(
            result[1],
            result[3] - 1,
            result[4],
            result[5],
            result[6],
            result[7]
          );
          if (
            d.getFullYear() == result[1] &&
            d.getMonth() + 1 == result[3] &&
            d.getDate() == result[4] &&
            d.getHours() == result[5] &&
            d.getMinutes() == result[6] &&
            d.getSeconds() == result[7]
          ) {
            callback();
          } else {
            callback(new Error("格式不正确"));
            return false;
          }
        } else {
          const result = sDate.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
          if (result == null) {
            callback(new Error("格式不正确"));
            return false;
          }
          const d = new Date(result[1], result[3] - 1, result[4]);
          if (
            d.getFullYear() == result[1] &&
            d.getMonth() + 1 == result[3] &&
            d.getDate() == result[4]
          ) {
            callback();
          } else {
            callback(new Error("格式不正确"));
            return false;
          }
        }
      };
      return {
        times: [],
        editType: "nodes",
        showTypeLabels: false,
        typeLabels: [],
        showEntityLabels: false,
        entityLabels: [],
        showOtherscLabels: false,
        otherscLabels: [],
        countys: [],
        selRelation: "",
        labelsData: {},
        relationForm: {
          rules: {
            relationObject1: [{
              required: true,
              message: "不能为空"
            }],
            relationObject2: [{
              required: true,
              message: "不能为空"
            }],
            relationTime: [{
              validator: validateDate,
              trigger: "blur"
            }],
          },
          relationType: "",
          relationObject1: "",
          relationObject2: "",
          relationObject3: "",
          relationTime: "",
        },
        aliasForm: {
          visible: false,
          correlation: [],
          alias: "",
          keyword: "",
          labels: [],
        },
        addNodeForm: {
          rules: {
            label: [{
              required: true,
              message: "不能为空"
            }],
          },
          label: [],
          node: {
            name: "",
            label: "",
            county: ""
          },
          lat: {
            value: "",
            type: "N"
          },
          lng: {
            value: "",
            type: "E"
          },
          county: "",
          selStr: "",
          selId: "",
        },
        webData: {},
        nodeObj: {},
        nodeNum: 0,
        form: {
          rules: {
            name: [{
              required: true,
              message: "不能为空"
            }],
            startTime: [{
              validator: validateDate,
              trigger: "blur"
            }],
            endTime: [{
              validator: validateDate,
              trigger: "blur"
            }],
          },
          visible: false,
          name: "",
          desc: "",
          startTime: "",
          endTime: "",
          nature: "",
          level: "",
        },
        edgeform: {
          rules: {
            time: [{
              validator: validateDate,
              trigger: "blur"
            }]
          },
          visible: false,
          time: "",
        },
        graphView: null,
        apiContentUrl: "",

        isShowChangeEdge: false, //修改边
        relationName: '',
        relationlist: []
      };
    },
    methods: {
      init: function (type) {
        console.log(type);
        const loading = this.$loading({
          lock: true,
          text: "正在分析中...",
          target: this.$refs["image-detail"].$el,
        });

        switch (type) {
          case "news":
            this.apiContentUrl = "api/getDetailsID";
            break;
          case "text":
            this.apiContentUrl = "api/getTxtsID";
            break;
        }
        if (type == "unstructure") {
          let detailFrom = this.$store.state.unstructureData;
          console.log(detailFrom);
          this.$store.dispatch("ajaxSetting", {
            // this.$store.dispatch("ajax", {
            url: `/zonghe/api/office/file/content/_get`,
            method: "post",
            data: {
              filepath: detailFrom.filepath_server,
            },
            succeed: (res) => {
              // console.log(res);
              // console.log(res.content);
              this.webData = {};
              this.webData.content = res.content;
              this.webData.title = detailFrom.filename;
              this.webData.auther =
                detailFrom.created_time + "来源： " + detailFrom.created_by;
              this.webData.htData = {
                v: "6.1.5",
                p: {
                  autoAdjustIndex: true,
                  hierarchicalRendering: false,
                },
                d: [],
              };
              this.$store.dispatch("ajaxSetting", {
                // this.$store.dispatch("ajax", {
                url: "/api/product",
                data: {
                  title: this.webData.title,
                  auther: this.webData.auther,
                  content: this.webData.content,
                },
                method: "post",
                succeed: (res2) => {
                  console.log(res2.data)
                  loading.close();
                  for (const item of res2.data.time) {
                    this.times.push({
                      value: item.correspondingtime,
                      label: item.timeword,
                    });
                  }

                  let content = "";
                  for (const item of res2.data.content) {
                    console.log(item.word);
                    let word = item.word;
                    // console.log(word);
                    switch (item.type) {

                      case 1:
                        content +=
                          '<span class="color-type">' + word + "</span>";
                        break;
                      case 2:
                        content +=
                          '<span class="color-entity">' + word + "</span>";
                        break;
                      case 3:
                        content +=
                          '<span class="color-county">' + word + "</span>";
                        break;
                      case 4:
                        content +=
                          '<span class="color-othersc">' + word + "</span>";

                        item.dubious.forEach((dubious, index) => {
                          if (item.dubious.length > 1 && index === 0) {
                            return;
                          }
                          // this.setNodeObj(dubious.name, dubious.label, dubious.type, dubious.county);
                          this.setNodeObj({
                            name: dubious.name,
                            label: dubious.label,
                            type: dubious.type,
                            county: dubious.county,
                          });
                        });
                        break;
                      case 5:
                        content +=
                          '<span class="color-unknown">' + word + "</span>";
                        break;
                      case -1:
                        content +=
                          '<span class="color-keyword">' + word + "</span>";
                        break;
                      default:
                        content += word;
                        break;
                    }
                  }
                  this.webData.content = content;
                  const iframe = this.$refs["content-iframe"];
                  const iframeDoc = document.all ?
                    iframe.contentWindow.document :
                    iframe.contentDocument;

                  iframeDoc.open();
                  console.log(this.webData);
                  iframeDoc.write(
                    `<html><head><link rel="stylesheet" type="text/css" href="${this.$store.state.baseUrl}style/news.css"></head><body><div class="content">${this.webData.content}</div></body></html>`
                  );
                  iframeDoc.close();
                  iframeDoc.contentEditable = true;
                  iframeDoc.designMode = "on";
                  setTimeout(function () {
                    const height = $(iframeDoc).outerHeight();
                    $(iframe).height(height);
                  }, 500);

                  iframeDoc.addEventListener(
                    "click",
                    () => {
                      let e = top.document.createEvent("mouseEvents");
                      e.initEvent("click", true, true);
                      top.document.dispatchEvent(e);
                    },
                    true
                  );

                  let htNode = {};
                  let relationship = [];
                  for (const item of res2.data.relevance) {
                    let node = {};
                    let nodeColor = "";
                    if (item.c === "ht.HtmlNode") {
                      let nameObj = item.name[0];
                      if (item.name.length > 1) {
                        nameObj = item.name[0];
                        nameObj.realName = item.name[1].name;
                      }

                      if (htNode[nameObj.name] === undefined) {
                        htNode[nameObj.name] = item;
                        this.setNodeObj({
                          name: nameObj.name,
                          label: nameObj.label,
                          type: nameObj.type,
                          county: nameObj.county,
                        });
                        this.nodeObj[nameObj.name].i = item.i.toString();
                      }

                      switch (nameObj.type) {
                        case 1:
                          nodeColor = "type";
                          break;
                        case 2:
                          nodeColor = "entity";
                          break;
                        case 3:
                          nodeColor = "county";
                          break;
                        case 4:
                          nodeColor = "othersc";
                          break;
                        case 5:
                          nodeColor = "unknown";
                          break;
                        case -1:
                          nodeColor = "keyword";
                          break;
                      }

                      node = {
                        c: "ht.HtmlNode",
                        i: item.i.toString(),
                        p: {
                          html: '<div class="system system-property bg-' +
                            nodeColor +
                            "\" title='" +
                            nameObj.name +
                            "'>" +
                            nameObj.name +
                            "</div>",
                        },
                        a: {
                          names: item.name,
                          // "index": item.name.length > 1 ? 1 : 0,
                          index: 0,
                          word: item.word,
                          // "word": item.name.length > 0 ? item.name[0].name : '',
                          verify: false,
                        },
                        s: {
                          "label.font": "4px Aria",
                        },
                      };
                      relationship.push(node);
                    } else if (item.c === "ht.Edge") {
                      node = {
                        c: "ht.Edge",
                        i: item.p.source.__i +
                          "-" +
                          item.p.target.__i +
                          "-" +
                          Math.random(),
                        p: {
                          source: {
                            __i: item.p.source.__i.toString(),
                          },
                          target: {
                            __i: item.p.target.__i.toString(),
                          },
                        },
                        a: {
                          // 关系描述: item.s.label,
                          "关系描述": item.relationship_label_name,
                          关系标签: item.f,
                          关系类型: item.d,
                          开始时间: item.time,
                          结束时间: item.etime,
                          核心描述词: item.s.label,
                          坐标: item.longitude && item.latitude ?
                            item.latitude + "," + item.longitude : "",
                        },
                        s: {
                          // label: item.s.label,
                          "label": item.relationship_label_name,
                          "label.color": "gray",
                          "label.font": "6px arial",
                          "label.offset.y": -5,
                          "edge.width": 0.5,
                          "edge.color": "gray",
                          icons: {
                            toArrow: {
                              position: 19,
                              keepOrien: true,
                              width: 30,
                              height: 15,
                              names: ["toArrow"],
                            },
                          },
                        },
                      };
                      relationship.push(node);
                    }
                  }
                  this.webData.htData.d = relationship;
                  console.log(relationship);
                  console.log(this.webData);
                  this.htInit();
                },
              });
            },
          });
          return;
        }
        this.$store.dispatch("ajaxSetting", {
          // this.$store.dispatch("ajax", {
          // url: 'local:/json/web' + this.$route.query.id + '.json', succeed: (res) => {
          url: "/api/newsDetail",
          method: "get",
          data: {
            id: this.$route.query.id
          },
          succeed: (res) => {
            console.log(res);
            this.webData = res.data;
            this.webData.auther =
              this.webData.time + "　　来源： " + this.webData.author;
            this.webData.htData = {
              v: "6.1.5",
              p: {
                autoAdjustIndex: true,
                hierarchicalRendering: false,
              },
              d: [],
            };
            this.$store.dispatch("ajaxSetting", {
              // this.$store.dispatch("ajax", {
              url: "/api/product",
              data: {
                title: this.webData.title,
                auther: this.webData.auther,
                content: this.webData.content,
              },
              method: "post",
              succeed: (res2) => {
                console.log(res2);
                loading.close();
                // res2.data = res.test.data;
                for (const item of res2.data.time) {
                  this.times.push({
                    value: item.correspondingtime,
                    label: item.timeword,
                  });
                }

                let content = "";
                for (const item of res2.data.content) {
                  // if (['county', 'othersc', 'keyword', 'state'].indexOf(item.nature) !== -1) {
                  //     content += '<span class="color-' + item.nature + '">' + item.word + '</span>';
                  //     this.setNodeObj(item.nature, item.z);
                  // } else if (this.entityNames.indexOf(item.nature) !== -1) {
                  //     content += '<span class="color-entity">' + item.word + '</span>';
                  //     this.setNodeObj(item.nature, item.z);
                  // } else if (this.typeNames.indexOf(item.nature) !== -1) {
                  //     content += '<span class="color-type">' + item.word + '</span>';
                  //     this.setNodeObj(item.nature, item.z);
                  // } else {
                  //     content += item.word;
                  // }
                  console.log(item);
                  switch (item.type) {
                    case 1:
                      content +=
                        '<span class="color-type">' + item.word + "</span>";
                      break;
                    case 2:
                      content +=
                        '<span class="color-entity">' + item.word + "</span>";
                      break;
                    case 3:
                      content +=
                        '<span class="color-county">' + item.word + "</span>";
                      break;
                    case 4:
                      content +=
                        '<span class="color-othersc">' + item.word + "</span>";

                      item.dubious.forEach((dubious, index) => {
                        if (item.dubious.length > 1 && index === 0) {
                          return;
                        }
                        // this.setNodeObj(dubious.name, dubious.label, dubious.type, dubious.county);
                        this.setNodeObj({
                          name: dubious.name,
                          label: dubious.label,
                          type: dubious.type,
                          county: dubious.county,
                        });
                      });
                      break;
                    case 5:
                      content +=
                        '<span class="color-unknown">' + item.word + "</span>";
                      break;
                    case -1:
                      content +=
                        '<span class="color-keyword">' + item.word + "</span>";
                      break;
                    default:
                      content += item.word;
                      break;
                  }
                }
                this.webData.content = content;
                const iframe = this.$refs["content-iframe"];
                const iframeDoc = document.all ?
                  iframe.contentWindow.document :
                  iframe.contentDocument;

                iframeDoc.open();
                iframeDoc.write(
                  `<html><head><link rel="stylesheet" type="text/css" href="${this.$store.state.baseUrl}style/news.css"></head><body><div class="content">${this.webData.content}</div></body></html>`
                );
                iframeDoc.close();
                iframeDoc.contentEditable = true;
                iframeDoc.designMode = "on";
                setTimeout(function () {
                  const height = $(iframeDoc).outerHeight();
                  $(iframe).height(height);
                }, 500);

                iframeDoc.addEventListener(
                  "click",
                  () => {
                    let e = top.document.createEvent("mouseEvents");
                    e.initEvent("click", true, true);
                    top.document.dispatchEvent(e);
                  },
                  true
                );

                let htNode = {};
                let relationship = [];
                for (const item of res2.data.relevance) {
                  let node = {};
                  let nodeColor = "";
                  if (item.c === "ht.HtmlNode") {
                    let nameObj = item.name[0];
                    if (item.name.length > 1) {
                      nameObj = item.name[0];
                      nameObj.realName = item.name[1].name;
                    }

                    if (htNode[nameObj.name] === undefined) {
                      htNode[nameObj.name] = item;
                      // this.setNodeObj(nameObj.name, nameObj.label, nameObj.type, nameObj.county);
                      this.setNodeObj({
                        name: nameObj.name,
                        label: nameObj.label,
                        type: nameObj.type,
                        county: nameObj.county,
                      });
                      this.nodeObj[nameObj.name].i = item.i.toString();
                      // } else {
                      //     continue;
                    }

                    switch (nameObj.type) {
                      case 1:
                        nodeColor = "type";
                        break;
                      case 2:
                        nodeColor = "entity";
                        break;
                      case 3:
                        nodeColor = "county";
                        break;
                      case 4:
                        nodeColor = "othersc";
                        break;
                      case 5:
                        nodeColor = "unknown";
                        break;
                      case -1:
                        nodeColor = "keyword";
                        break;
                    }

                    node = {
                      c: "ht.HtmlNode",
                      i: item.i.toString(),
                      p: {
                        html: '<div class="system system-property bg-' +
                          nodeColor +
                          "\" title='" +
                          nameObj.name +
                          "'>" +
                          nameObj.name +
                          "</div>",
                      },
                      a: {
                        names: item.name,
                        // "index": item.name.length > 1 ? 1 : 0,
                        index: 0,
                        word: item.word,
                        // "word": item.name.length > 0 ? item.name[0].name : '',
                        verify: false,
                      },
                      s: {
                        "label.font": "4px Aria",
                      },
                    };
                    relationship.push(node);
                  } else if (item.c === "ht.Edge") {
                    node = {
                      c: "ht.Edge",
                      i: item.p.source.__i +
                        "-" +
                        item.p.target.__i +
                        "-" +
                        Math.random(),
                      p: {
                        source: {
                          __i: item.p.source.__i.toString(),
                        },
                        target: {
                          __i: item.p.target.__i.toString(),
                        },
                      },
                      a: {
                        // 关系描述: item.s.label,
                        "关系描述": item.relationship_label_name,
                        关系标签: item.f,
                        关系类型: item.d,
                        开始时间: item.time,
                        结束时间: item.etime,
                        核心描述词: item.s.label,
                        坐标: item.longitude && item.latitude ?
                          item.latitude + "," + item.longitude : "",
                      },
                      s: {
                        label: item.relationship_label_name,
                        // label: item.s.label,
                        "label.color": "gray",
                        "label.font": "6px arial",
                        "label.offset.y": -5,
                        "edge.width": 0.5,
                        "edge.color": "gray",
                        icons: {
                          toArrow: {
                            position: 19,
                            keepOrien: true,
                            width: 30,
                            height: 15,
                            names: ["toArrow"],
                          },
                        },
                      },
                    };
                    relationship.push(node);
                  }
                }
                this.webData.htData.d = relationship;
                this.htInit();
              },
            });
          },
        });
      },
      htInit: function () {
        let moveXY = 0;
        let $this = this;
        let details_info = this.$refs.details_info;
        let dataModel = new ht.DataModel();
        let graphView = new ht.graph.GraphView(dataModel);
        let view = graphView.getView();
        view.className = "main";
        details_info.innerHTML = "";
        details_info.appendChild(view);
        graphView.setEditable(true);
        this.graphView = graphView;

        const iframe = $this.$refs["content-iframe"];
        const iframeDoc = document.all ?
          iframe.contentWindow.document :
          iframe.contentDocument;
        const reg = new RegExp('<span class="select-text">(.+?)</span>', "gm");
        let regStr = null;
        do {
          regStr = reg.exec(iframeDoc.body.innerHTML);
          if (regStr) {
            iframeDoc.body.innerHTML = iframeDoc.body.innerHTML.replace(
              regStr[0],
              regStr[1]
            );
          }
        } while (regStr);

        dataModel.addDataModelChangeListener((e) => {
          // else if(e.kind === 'remove'){
          //     output = e.data + ' removed, ';
          // }
          // else if(e.kind === 'clear'){
          //     output = 'data model cleared, ';
          // }
          // output += 'size:' + dataModel.size();

          if (e.kind === "add" && e.data instanceof ht.HtmlNode) {
            if (e.data._attrObject.names.length > 1) {
              if (e.data._attrObject.verify) {
                e.data.addStyleIcon("ok", {
                  position: 24,
                  offsetX: -5,
                  offsetY: -5,
                  width: 8,
                  height: 8,
                  names: ["ok-icon"],
                });
              } else {
                e.data.addStyleIcon("alarm", {
                  position: 24,
                  offsetX: -5,
                  offsetY: -5,
                  width: 8,
                  height: 8,
                  names: ["alarm-icon"],
                });
              }
            }
            if (e.data._attrObject.type === 5) {
              if (e.data._attrObject.verify) {
                e.data.addStyleIcon("ok", {
                  position: 24,
                  offsetX: -5,
                  offsetY: -5,
                  width: 8,
                  height: 8,
                  names: ["ok-icon"],
                });
              } else {
                e.data.addStyleIcon("alarm", {
                  position: 24,
                  offsetX: -5,
                  offsetY: -5,
                  width: 8,
                  height: 8,
                  names: ["alarm-icon2"],
                });
              }
            }
          } else if (e.kind === "remove") {
            for (const i in this.webData.htData.d) {
              const item = this.webData.htData.d[i];
              if (item.i === e.data._id) {
                this.webData.htData.d.splice(i, 1);
                break;
              }
            }
            if (e.data instanceof ht.HtmlNode) {
              const name =
                e.data._attrObject.names[e.data._attrObject.index].name;
              if (this.nodeObj[name]) {
                this.nodeObj[name].i = "-1";
              }
            }
          }
        });
        graphView.addInteractorListener(function (e) {
          if (e.kind !== "clickData" && e.kind !== "clickBackground") {
            return false;
          }

          do {
            regStr = reg.exec(iframeDoc.body.innerHTML);
            if (regStr) {
              iframeDoc.body.innerHTML = iframeDoc.body.innerHTML.replace(
                regStr[0],
                regStr[1]
              );
            }
          } while (regStr);
          $this.selRelation = null;
          $this.form.visible = false;
          $this.edgeform.visible = false;

          if (e.data instanceof ht.HtmlNode) {
            const temp = e.data._attrObject.names[e.data._attrObject.index];
            console.log(e.data)
            if (temp.type === -1) {
              $this.selRelation = e.data;
              $this.form.visible = true;
              $this.form.name = temp.name;
              $this.form.desc = e.data._attrObject.desc;
              $this.form.startTime = e.data._attrObject.startTime;
              $this.form.endTime = e.data._attrObject.endTime;
              $this.form.nature = e.data._attrObject.nature;
              $this.form.level = e.data._attrObject.level;
            }

            const source = e.data._attrObject.word;
            iframeDoc.body.innerHTML = iframeDoc.body.innerHTML.replace(
              new RegExp(source, "gm"),
              '<span class="select-text">' + source + "</span>"
            );
          } else if (e.data instanceof ht.Edge) {
            $this.selRelation = e.data;
            $this.edgeform.visible = true;
            $this.edgeform.time = e.data._attrObject["开始时间"];
          }
        });
        view.addEventListener("mousedown", function (e) {
          moveXY = e.clientX + e.clientY;
        });
        view.addEventListener("mouseup", function (e) {
          moveXY -= moveXY === 0 ? 0 : e.clientX + e.clientY;
        });

        let style = graphView.getView().style;
        style.left = "0";
        style.top = "0";
        style.right = "0";
        style.bottom = "0";
        // console.log(JSON.stringify(this.webData.htData));

        const contextmenu = new ht.widget.ContextMenu();
        contextmenu.enableGlobalKey();
        contextmenu.addTo(view);
        contextmenu.beforeShow = function (e) {
          console.log(e);
          let node = graphView.getDataAt(e);
          console.log(node);
          let json = [];

          if (node instanceof ht.HtmlNode && node._attrObject.names.length > 1) {
            for (const index in node._attrObject.names) {
              const item = node._attrObject.names[index];
              if (index === "0") {
                json.push({
                  label: node._attrObject.names[0].name,
                  disabled: true,
                });
                json.push("separator");
                json.push({
                  label: "新类型",
                  action: function () {
                    $this.selNode("type", 1, item.name, node._id);
                    $this.editType = "nodes";
                  },
                });
                json.push({
                  label: "新实体",
                  action: function () {
                    $this.selNode("entity", 2, item.name, node._id);
                    $this.editType = "nodes";
                  },
                });
                json.push({
                  label: "新地区",
                  action: function () {
                    $this.selNode("othersc", 4, item.name, node._id);
                    $this.editType = "nodes";
                  },
                });
                json.push("separator");
                continue;
              }
              json.push({
                label: item.name + " <" + item.label + ">",
                action: function (data) {
                  this.node.removeStyleIcon("alarm");
                  this.node.removeStyleIcon("ok");
                  this.node.addStyleIcon("ok", {
                    position: 24,
                    offsetX: -5,
                    offsetY: -5,
                    width: 8,
                    height: 8,
                    names: ["ok-icon"],
                  });

                  for (const item of $this.webData.htData.d) {
                    if (item.i === this.node._id) {
                      let nodeColor = "";
                      const nameObj = this.node._attrObject.names[data._id - 6];
                      switch (nameObj.type) {
                        case 1:
                          nodeColor = "type";
                          break;
                        case 2:
                          nodeColor = "entity";
                          break;
                      }
                      item.p.html =
                        '<div class="system system-property bg-' +
                        nodeColor +
                        "\" title='" +
                        nameObj.name +
                        "'>" +
                        nameObj.name +
                        "</div>";
                      item.a.index = data._id - 6;
                      item.a.verify = true;
                      $this.htInit();
                    }
                  }
                },
              });
            }
            this.setItems(json);
            this.node = node;
          } else if (
            node instanceof ht.HtmlNode &&
            node._attrObject.names[0].type === 5
          ) {
            const item = node._attrObject.names[0];
            json.push({
              label: node._attrObject.names[0].name,
              disabled: true,
            });
            json.push("separator");
            json.push({
              label: "新类型",
              action: function () {
                $this.selNode("type", 1, item.name, node._id);
                $this.editType = "nodes";
              },
            });
            json.push({
              label: "新实体",
              action: function () {
                $this.selNode("entity", 2, item.name, node._id);
                $this.editType = "nodes";
              },
            });
            json.push({
              label: "新地区",
              action: function () {
                $this.selNode("othersc", 4, item.name, node._id);
                $this.editType = "nodes";
              },
            });
          } else if (node instanceof ht.HtmlNode == false) {
            console.log(node._attrObject);
            // this.isShowChangeEdge = false;
            json.push({
              label: node._attrObject['关系描述'],
              disabled: true,
            });
            json.push({
              label: "切换关系",
              action: function () {
                $this.selEdge(node);
              },
            });
          }
          this.setItems(json);
        };

        graphView.dm().deserialize(this.webData.htData, null, true);
        graphView.enableToolTip();
        graphView.getToolTip = function (e) {
          const node = graphView.getDataAt(e);
          if (!(node && node._attrObject)) {
            return;
          }
          if (node instanceof ht.HtmlNode && node._attrObject.names) {
            return node._attrObject.names[node._attrObject.index].name;
          } else if (node instanceof ht.Edge && node._attrObject["开始时间"]) {
            return node._attrObject["开始时间"];
          }
        };

        let autoLayout = new ht.layout.AutoLayout(graphView);
        autoLayout.setAnimate(true);
        autoLayout.layout("circular", function () {
          graphView.fitContent(true);
        });
      },
      selNode: function (label, type, str, id) {
        console.log(label);
        const selText = str ? str : this.selText();

        if (!selText) {
          return false;
        }

        this.showEntityLabels = false;
        this.showTypeLabels = false;
        this.showOtherscLabels = false;

        if (label === "entity") {
          this.showEntityLabels = true;
          this.$refs.addEntityForm.resetFields();
        } else if (label === "type") {
          this.showTypeLabels = true;
          this.$refs.addTypeForm.resetFields();
        } else if (label === "othersc") {
          this.showOtherscLabels = true;
          this.$refs.addOtherscForm.resetFields();
        }
        this.aliasChange(selText, type);

        if (str) {
          this.addNodeForm.selStr = str;
          this.addNodeForm.selId = id;
        } else {
          this.addNodeForm.selStr = "";
          this.addNodeForm.selId = "";
        }
      },
      selEdge: function (node) {
        this.relationName = node._attrObject['关系描述'];
        this.isShowChangeEdge = true;
        this.$store.dispatch("ajaxService", {
          url: "/services/app-zonghe/api/dicLabel/tree?type.equals=5",
          method: "get",
          succeed: (res) => {
            // console.log(res);
            this.relationlist = res;
          },
        });
      },
      selText: function () {
        const iframe = this.$refs["content-iframe"];
        const iframeDoc = document.all ?
          iframe.contentWindow.document :
          iframe.contentDocument;
        return iframeDoc.getSelection().toString();
      },
      setText: function (type) {
        const iframe = this.$refs["content-iframe"];
        const iframeDoc = document.all ?
          iframe.contentWindow.document :
          iframe.contentDocument;
        const selText = iframeDoc.getSelection().toString();

        if (selText === "") {
          return false;
        }
        iframeDoc.body.innerHTML = iframeDoc.body.innerHTML.replace(
          new RegExp(selText, "gm"),
          '<span class="color-' + type + '">' + selText + "</span>"
        );
        iframeDoc.getSelection().removeAllRanges();
      },
      // setNodeObj: function (name, label, type, county, id) {
      //     let i = '-1';
      //     if (this.nodeObj[name]) {
      //         i = this.nodeObj[name].i;
      //     } else {
      //         i = id ? id : '-1';
      //     }
      //     this.nodeObj[name] = {name: name, label: label, type: type, county: county, i: i};
      // },
      setNodeObj: function (data) {
        let i = "-1";
        if (this.nodeObj[data.name]) {
          i = this.nodeObj[data.name].i;
        } else {
          i = data.i ? data.i : "-1";
        }
        this.nodeObj[data.name] = Object.assign({}, data, {
          i: i
        });
      },
      saveNode: function () {
        let formName = "";

        if (this.showEntityLabels) {
          formName = "addEntityForm";
        } else if (this.showTypeLabels) {
          formName = "addTypeForm";
        } else if (this.showOtherscLabels) {
          formName = "addOtherscForm";
        }

        this.$refs[formName].validate((valid) => {
          if (valid) {
            let type = 2;
            let selText = this.selText();
            if (this.addNodeForm.selStr) {
              selText = this.addNodeForm.selStr;
            }
            if (this.showEntityLabels) {
              this.setText("entity");
              type = 2;
            } else if (this.showTypeLabels) {
              this.setText("type");
              type = 1;
            } else if (this.showOtherscLabels) {
              this.setText("othersc");
              type = 4;
            }
            if (this.addNodeForm.node.county === "") {
              this.addNodeForm.node.name = selText;
            } else {
              this.addNodeForm.label = [this.addNodeForm.node.label];
              this.addNodeForm.county = this.addNodeForm.node.county;
            }

            const name = this.addNodeForm.node.name;
            // const label =
            //   this.addNodeForm.label[this.addNodeForm.label.length - 1];
            const label =  this.addNodeForm.node.label
            const county = this.addNodeForm.county;
            // this.setNodeObj(name, label, type, county, this.addNodeForm.selId);

            let nodeData = {
              name: name,
              label: label,
              type: type,
              county: county,
              i: this.addNodeForm.selId,
            };
            console.log(nodeData);
            if (this.showOtherscLabels) {
              let lat = Math.abs(this.addNodeForm.lat.value);
              let lng = Math.abs(this.addNodeForm.lng.value);
              nodeData.lat = this.addNodeForm.lat.type === "N" ? lat : -lat;
              nodeData.lng = this.addNodeForm.lng.type === "E" ? lng : -lng;
            }
            this.setNodeObj(nodeData);

            for (let item of this.webData.htData.d) {
              if (item.i === this.addNodeForm.selId) {
                let nodeColor = "";

                switch (type) {
                  case 1:
                    nodeColor = "type";
                    break;
                  case 2:
                    nodeColor = "entity";
                    break;
                  case 4:
                    nodeColor = "othersc";
                    break;
                  case 5:
                    nodeColor = "unknown";
                    break;
                }

                item.p.html =
                  '<div class="system system-property bg-' +
                  nodeColor +
                  "\" title='" +
                  name +
                  "'>" +
                  name +
                  "</div>";
                item.a.names = [{
                  name: name,
                  label: label,
                  type: type,
                  county: county
                }, ];
                item.a.index = 0;

                if (nodeData.lat !== undefined && nodeData.lng !== undefined) {
                  item.a.lat = nodeData.lat;
                  item.a.lng = nodeData.lng;
                }

                this.htInit();
                break;
              }
            }

            this.showTypeLabels = false;
            this.showEntityLabels = false;
            this.showOtherscLabels = false;
          }
        });
      },
      saveRelation: function () {
        this.$refs[this.relationForm.relationType].validate((valid) => {
          if (valid) {
            const selText = this.selText();
            if (
              this.relationForm.relationType == "" ||
              this.relationForm.relationObject1 == "" ||
              this.relationForm.relationObject2 == ""
            ) {
              return false;
            }

            // this.setNodeObj(selText, 'keyword', 10, '');
            this.setNodeObj({
              name: selText,
              label: "keyword",
              type: -1
            });
            const startNode = this.nodeObj[this.relationForm.relationObject1];
            const endNode = ["事故", "维修", "任务"].indexOf(
                this.relationForm.relationObject2
              ) === -1 ?
              this.nodeObj[this.relationForm.relationObject2] : {
                name: this.relationForm.relationObject2,
                label: this.relationForm.relationObject2,
                type: -1,
                i: "-1",
              };
            if (startNode.i === "-1") {
              let nodeColor = "";

              switch (startNode.type) {
                case 1:
                  nodeColor = "type";
                  break;
                case 2:
                  nodeColor = "entity";
                  break;
                case 4:
                  nodeColor = "othersc";
                  break;
                case 5:
                  nodeColor = "unknown";
                  break;
                case -1:
                  nodeColor = "keyword";
                  break;
              }

              startNode.i = this.relationForm.relationObject1;
              const node = {
                c: "ht.HtmlNode",
                i: startNode.i,
                p: {
                  html: '<div class="system system-property bg-' +
                    nodeColor +
                    "\" title='" +
                    startNode.name +
                    "'>" +
                    startNode.name +
                    "</div>",
                },
                a: {
                  // "names":[{name: startNode.name, label: startNode.label, type: startNode.type, county: startNode.county}],
                  names: [startNode],
                  index: 0,
                },
                s: {
                  "label.font": "4px Aria",
                },
              };

              this.webData.htData.d.push(node);
            }
            if (endNode.i === "-1") {
              let nodeColor = "";

              switch (endNode.type) {
                case 1:
                  nodeColor = "type";
                  break;
                case 2:
                  nodeColor = "entity";
                  break;
                case 4:
                  nodeColor = "othersc";
                  break;
                case 5:
                  nodeColor = "unknown";
                  break;
                case -1:
                  nodeColor = "keyword";
                  break;
              }

              endNode.i =
                endNode.type === -1 ?
                this.relationForm.relationObject2 + ++this.nodeNum :
                this.relationForm.relationObject2;
              const node = {
                c: "ht.HtmlNode",
                i: endNode.i,
                p: {
                  html: '<div class="system system-property bg-' +
                    nodeColor +
                    "\" title='" +
                    endNode.name +
                    "'>" +
                    endNode.name +
                    "</div>",
                },
                a: {
                  // "names": [{name: endNode.name, label: endNode.label, type: endNode.type, county: endNode.county}],
                  names: [endNode],
                  index: 0,
                },
                s: {
                  "label.font": "4px Aria",
                },
              };

              if (endNode.type === -1) {
                node.a.names[node.a.index].name =
                  this.relationForm.relationObject2;
                // node.a.startTime = this.relationForm.relationTime;
              } else {
                // node.a.names = [{name: endNode.name, label: endNode.label, type: endNode.type, county: endNode.county}];
                node.a.names = [endNode];
              }

              this.webData.htData.d.push(node);
            }

            const aObj = {
              关系描述: selText || this.relationForm.relationType,
              关系标签: "",
              关系类型: "",
              开始时间: this.relationForm.relationTime,
              结束时间: "",
              核心描述词: "",
            };
            switch (this.relationForm.relationType) {
              case "移动":
                aObj["关系描述"] = selText || "抵达";
                aObj["关系标签"] = "位置关系";
                aObj["关系类型"] = "移动关系";
                break;
              case "配置":
                aObj["关系标签"] = "结构关系";
                aObj["关系类型"] = "配置关系";
                break;
              case "编成":
                aObj["关系标签"] = "结构关系";
                aObj["关系类型"] = "编成关系";
                break;
              case "活动":
                aObj["关系标签"] = "活动事件关系";
                aObj["关系类型"] = this.relationForm.relationObject2 + "关系";
                switch (this.relationForm.relationObject2) {
                  case "事故":
                    aObj["关系类型"] = "事故故障关系";
                    break;
                  case "维修":
                    aObj["关系类型"] = "维修保障关系";
                    break;
                  case "任务":
                    aObj["关系类型"] = "执行任务关系";
                    break;
                }
                break;
            }

            const edge = {
              c: "ht.Edge",
              i: startNode.i + "-" + endNode.i,
              p: {
                source: {
                  __i: startNode.i,
                },
                target: {
                  __i: endNode.i,
                },
              },
              a: aObj,
              s: {
                label: aObj["关系描述"],
                "label.color": "gray",
                "label.font": "6px arial",
                "edge.width": 0.5,
                "edge.color": "gray",
                icons: {
                  toArrow: {
                    position: 19,
                    keepOrien: true,
                    width: 30,
                    height: 15,
                    names: ["toArrow"],
                  },
                },
              },
            };
            switch (this.relationForm.relationObject2) {
              case "事故":
                edge.s.label = "发生事故";
                break;
              case "维修":
                edge.s.label = "进行维修";
                break;
              case "任务":
                edge.s.label = "实施任务";
                break;
            }

            this.webData.htData.d.push(edge);

            if (this.relationForm.relationObject3 !== "") {
              const locationNode =
                this.nodeObj[this.relationForm.relationObject3];
              if (locationNode.i === "-1") {
                locationNode.i = this.relationForm.relationObject3;
                const node = {
                  c: "ht.HtmlNode",
                  i: locationNode.i,
                  p: {
                    html: '<div class="system system-property bg-othersc" title=\'' +
                      locationNode.name +
                      "'>" +
                      locationNode.name +
                      "</div>",
                  },
                  a: {
                    // "names": [{name: locationNode.name, label: locationNode.label, type: locationNode.type}],
                    names: [locationNode],
                    index: 0,
                  },
                  s: {
                    "label.font": "4px Aria",
                  },
                };

                this.webData.htData.d.push(node);
              }

              const edge1 = {
                c: "ht.Edge",
                i: startNode.i + "-" + locationNode.i,
                p: {
                  source: {
                    __i: startNode.i,
                  },
                  target: {
                    __i: locationNode.i,
                  },
                },
                a: {
                  关系描述: "发生于",
                  关系标签: "位置关系",
                  关系类型: "移动关系",
                  开始时间: this.relationForm.relationTime,
                  结束时间: "",
                  核心描述词: "抵达",
                },
                s: {
                  label: "发生于",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              };
              this.webData.htData.d.push(edge1);

              const edge2 = {
                c: "ht.Edge",
                i: endNode.i + "-" + locationNode.i,
                p: {
                  source: {
                    __i: endNode.i,
                  },
                  target: {
                    __i: locationNode.i,
                  },
                },
                a: {
                  关系描述: "发生于",
                  关系标签: "位置关系",
                  关系类型: "活动事件地点关系",
                  开始时间: this.relationForm.relationTime,
                  结束时间: "",
                  核心描述词: "",
                },
                s: {
                  label: "发生于",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              };
              this.webData.htData.d.push(edge2);
            }

            this.htInit();
            this.relationForm.relationType = "";
            this.relationForm.relationObject1 = "";
            this.relationForm.relationObject2 = "";
            this.relationForm.relationObject3 = "";
            this.relationForm.relationTime = "";
            this.setText("keyword");
          }
        });
      },
      editRelation: function () {
        for (const item of this.webData.htData.d) {
          if (item.i === this.selRelation._id) {
            if (this.selRelation instanceof ht.HtmlNode) {
              item.a.names[item.a.index].name = this.form.name;
              item.a.desc = this.form.desc;
              item.a.startTime = this.form.startTime;
              item.a.endTime = this.form.endTime;
              item.a.nature = this.form.nature;
              item.a.level = this.form.level;

              item.p.html =
                '<div class="system system-property bg-keyword" title=\'' +
                this.form.name +
                "'>" +
                this.form.name +
                "</div>";
            } else if (this.selRelation instanceof ht.Edge) {
              item.a["开始时间"] = this.edgeform.time;
            }
            this.htInit();
          }
        }
        this.selRelation = null;
      },
      //修改关系名称
      changeRelationName: function (val) {
        // console.log(val);
        // console.log(this.selRelation);
        for (const item of this.webData.htData.d) {
          if (item.i === this.selRelation._id) {
            console.log(item);
            item.a['关系描述'] = val.label_name;
            item.s['label'] = val.label_name;
            this.htInit();
          }
        }
      },
      selRelationChange: function (value) {
        this.$refs[value].resetFields();
      },
      timeSearch(str, cb) {
        const results = str ?
          this.times.filter(this.createFilter(str)) :
          this.times;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(str) {
        return (restaurant) => {
          return restaurant.value.toLowerCase().indexOf(str.toLowerCase()) === 0;
        };
      },
      importAnalyze: function () {
        // const htData = JSON.parse(this.graphView.dm().serialize());
        let data = {
          nodes: [],
          relation: []
        };

        for (const item of this.webData.htData.d) {
          if (item.c === "ht.HtmlNode") {
            const temp = item.a.names[item.a.index];
            console.log(temp);
            let node = {
              id: item.i,
              名称: temp.realName ? temp.realName : temp.name,
              节点标签: temp.label,
              国家: temp.county,
            };

            if (temp.type == -1) {
              switch (temp.label) {
                case "事故":
                  node["节点标签"] = "事故故障实体节点";
                  break;
                case "维修":
                  node["节点标签"] = "维修保障节点";
                  break;
                case "任务":
                  node["节点标签"] = "任务实体节点";
                  break;
              }

              node["描述"] = item.a.desc || "";
              node["开始时间"] = item.a.startTime || "";
              node["结束时间"] = item.a.endTime || "";
              node["性质"] = item.a.nature || "";
              node["程度"] = item.a.level || "";
              node["信息来源"] = window.location.href;
              node["涉及关系"] = "";
            } else if (temp.type == 4) {
              if (item.a.lat !== undefined && item.a.lng !== undefined) {
                node["纬度"] = item.a.lat.toString();
                node["经度"] = item.a.lng.toString();
                node["别名"] = temp.name;
              } else if (temp.lat !== undefined && temp.lng !== undefined) {
                node["纬度"] = temp.lat.toString();
                node["经度"] = temp.lng.toString();
                node["别名"] = temp.name;
              }
              // } else if (temp.type == 5) {
              //     Message({
              //         type: 'warning',
              //         showClose: true,
              //         message: '图中有未知节点，请处理后再导入！',
              //     });
              //
              //     return;
            }

            data.nodes.push(node);
          } else if (item.c === "ht.Edge") {
            let edge = {
              startId: item.p.source.__i,
              endId: item.p.target.__i,
              关系描述: item.a["关系描述"],
              关系标签: item.a["关系标签"],
              关系类型: item.a["关系类型"],
              开始时间: item.a["开始时间"],
              结束时间: "",
              核心描述词: item.a["核心描述词"] || item.a["关系描述"],
              relationship_label_name: item.a["关系描述"]
            };

            if (item.a["坐标"]) {
              edge["坐标"] = item.a["坐标"];
            }

            data.relation.push(edge);
          }
        }

        // console.log(JSON.stringify(data));
        // console.log(data, this.webData.htData.d,this.nodeObj);return;
        showLoading()
        this.$store.dispatch("ajaxApi", {
          // this.$store.dispatch("ajax", {
          // url: "/api/webpage/analyzeToLead",
          url: '/zonghe/api/comparison/analyzeToLead',
          data: data,
          method: "post",
          succeed: () => {
            hideLoading()
            this.$message.success("导入成功！");
          },
          errored: () => {
            hideLoading()
          }
        });
      },
      aliasFormOpen: function () {
        this.aliasForm.visible = true;
        this.$refs["aliasForm"].resetFields();
        this.aliasForm.alias = this.selText();
        this.aliasForm.keyword = this.selText();
        this.aliasForm.labels = [];
        this.aliasChange(this.aliasForm.keyword);
      },
      aliasChange: function (val, type) {
        if (val === "") {
          return;
        }

        let data = {
          content: val
        };
        if (type) {
          data.type = type;
        }

        // this.$store.dispatch("ajax", {
        this.$store.dispatch("ajaxSetting", {
          url: "/api/select",
          data: data,
          method: "post",
          succeed: (res) => {
            let data = {};
            this.labelsData = res;
            for (const item of res) {
              if (data.hasOwnProperty(item.label)) {
                data[item.label].children.push({
                  label: item.name,
                  value: item
                });
              } else {
                data[item.label] = {
                  label: item.label,
                  value: item.label,
                  children: [{
                    label: item.name,
                    value: item
                  }],
                };
              }
            }
            for (const key in data) {
              this.aliasForm.labels.push(data[key]);
            }
          },
        });
      },
      aliasSave: function () {
        const nodeLabel = this.aliasForm.correlation[0];
        let node = this.aliasForm.correlation[1];
        node.alias +=
          (node.alias.length === 0 ? "" : "#~#") + this.aliasForm.alias;

        // this.$store.dispatch("ajax", {
        this.$store.dispatch("ajaxSetting", {
          url: "/api/alias/saveNodesName",
          method: "put",
          data: {
            id: node.id.toString(),
            alias: node.alias,
            nodeLabel: nodeLabel,
          },
          succeed: () => {
            this.$message.success("保存成功");
            this.init(this.$route.query.type);
            this.aliasForm.visible = false;
          },
        });
      },
    },
    mounted: function () {
      ht.Default.setImage("toArrow", {
        width: 100,
        height: 50,
        comps: [{
            type: "shape",
            points: [2, 25, 30, 25],
            borderWidth: 1,
          },
          {
            type: "shape",
            points: [15, 5, 30, 25, 15, 45, 50, 25, 15, 5],
            background: "gray",
            borderWidth: 1,
          },
        ],
      });
      ht.Default.setImage("alarm-icon", {
        width: 100,
        height: 100,
        // opacity: { func: 'attr@alarm.opacity' },
        comps: [{
            type: "triangle",
            rect: [2, 2, 96, 96],
            background: "red",
          },
          {
            type: "rect",
            rect: [45, 30, 10, 40],
            background: "white",
          },
          {
            type: "circle",
            rect: [40, 72, 20, 20],
            background: "white",
          },
        ],
      });
      ht.Default.setImage("alarm-icon2", {
        width: 100,
        height: 100,
        // opacity: { func: 'attr@alarm.opacity' },
        comps: [{
            type: "triangle",
            rect: [2, 2, 96, 96],
            background: "orange",
          },
          {
            type: "rect",
            rect: [45, 30, 10, 40],
            background: "white",
          },
          {
            type: "circle",
            rect: [40, 72, 20, 20],
            background: "white",
          },
        ],
      });
      ht.Default.setImage("ok-icon", {
        width: 100,
        height: 100,
        // opacity: { func: 'attr@alarm.opacity' },
        comps: [{
            type: "circle",
            rect: [2, 2, 96, 96],
            background: {
              value: "green",
              func: "attr@alarm.color",
            },
          },
          {
            type: "rect",
            rotation: Math.PI / 4,
            rect: [52, 30, 10, 40],
            background: "white",
          },
          {
            type: "rect",
            rotation: 90.1,
            rect: [35, 48, 10, 20],
            background: "white",
          },
        ],
      });

      document.addEventListener("click", (e) => {
        let flag = e.path.indexOf(document.getElementsByClassName("tool")[0]);
        if (flag !== -1) {
          return;
        }

        this.isShowChangeEdge = false;
        this.showTypeLabels = false;
        this.showEntityLabels = false;
        this.showOtherscLabels = false;
        this.aliasForm.visible = false;
        this.aliasForm.correlation = [];
        this.relationForm.relationType = "";
        // this.addNodeForm.selLabel = [];

        if (this.$refs["correlation"]) {
          this.$refs["correlation"].menuVisible = false;
        }
      });
      this.$store.dispatch("ajaxService", {
        url: "/services/app-zonghe/api/dicLabel/tree?type.notEquals=5",
        method: "get",
        succeed: (res) => {
          console.log(res);
          // this.typeLabels = []; //目标标签列表
          // this.entityLabels = [];
          // this.otherscLabels = [];
          this.typeLabels = res;
          // this.entityLabels = res;
          // this.otherscLabels = res;
        },
      });
      this.$store.dispatch("ajaxSetting", {
        // this.$store.dispatch("ajax", {
        url: "/api/converter/getLabelColumn",
        method: "get",
        succeed: (res) => {
          console.log(res);
          // this.typeLabels = []; //目标标签列表
          this.entityLabels = [];
          this.otherscLabels = [];

          for (const row of res.rows) {
            switch (row.type) {
              case 1:
                // this.typeLabels.push(row);
                break;
              case 2:
                this.entityLabels.push(row);
                break;
              case 4:
                this.otherscLabels.push(row);
                break;
            }
          }
        },
      });
      this.$store.dispatch("ajaxSetting", {
        // this.$store.dispatch("ajax", {
        url: "/api/entityList/queryEntityList",
        method: "get",
        succeed: (res) => {
          this.countys = res.rows;
        },
      });

      this.init(this.$route.query.type);
    },
  };
</script>